<template>
  <div class="no-net-wrapper">
    <img class="no-net-icon" :src="noNet" />
    <div class="no-net-tip">
      你的网络开小差啦
      <p>请检查网络连接后重试</p>
    </div>
    <div class="no-net-retry" @click="refreshRetry">刷新重试</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// import noNet from '@/assets/images/no-net.png'

@Component()
export default class NoNet extends Vue {
  noNet =
    ''
  refreshRetry() {
    window.location.href = `${location.origin}${location.pathname}`
  }
}
</script>

<style lang="scss" scoped>
.no-net {
  &-wrapper {
    background: #fff;
    border-radius: 8px;
    height: calc(100vh - constant(safe-area-inset-bottom));
    height: calc(100vh - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  &-icon {
    width: 100px;
    height: 100px;
  }
  &-tip {
    line-height: 18px;
    color: #333;
    text-align: center;
    margin: 10px auto 36px;
    font-size: 15px;
    p {
      margin-top: 8px;
      padding: 0;
      font-size: 14px;
      color: rgba(117, 121, 128, 1);
    }
  }
  &-retry {
    margin: 0 auto;
    line-height: 20px;
    color: rgba(21, 100, 255, 1);
    text-align: center;
    font-size: 15px;
  }
}
</style>
